<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab选项卡</title>
    <style>
        .tab-content {
			width: 200px;
			height: 200px;
			background-color: #ffcc00;
            display: none;
        }
        .tab-content .active {
            display: block;
        }
        .tabs {
            display: flex;
            cursor: pointer;
        }
        .tabs div {
            padding: 10px;
            background-color: #ddd;
            margin-right: 5px;
        }
    </style>
	<script src="../js/jquery-1.11.1.js"></script>
	
</head>
<body>
    <div class="tabs">
        <div class="active" data-tab="1">tab01</div>
        <div data-tab="2">tab02</div>
        <div data-tab="3">tab03</div>
    </div>
    <div class="tab-content active" id="tab1">tab文字内容一</div>
    <div class="tab-content" id="tab2">tab文字内容二</div>
    <div class="tab-content" id="tab3">tab文字内容三</div>
	
	<script>
	    
	        $('.tabs div').click(function() {
	            $('.tabs div').removeClass('ae');
	            $('.tab-content').removeClass('ae').hide();
	            var tabId = $(this).data('tab');
	            $('#tab' + tabId).addClass('ae').show();
	        });
	   
	</script>
</body>
</html>